<template>
  <el-dialog class="np-el-dialog" title="" :visible.sync="dialogPvVisible" :close-on-click-modal="false"
    :close-on-press-escape="false" :style="{ '--width': width, '--min-width': minWidth, '--max-width': maxWidth, }"
    :show-close="false">
    <div></div>
    <div class="np-el-d-body">
      <slot></slot>
    </div>
    <div></div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "auto"
    },
    minWidth: {
      type: String,
      default: "auto"
    },
    maxWidth: {
      type: String,
      default: "auto"
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogPvVisible: false,
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.dialogPvVisible = newVal;
      }
    }
  },
  methods: {
    clickTitle() {
      this.isActive = !this.isActive
    }
  },
  created() {
  }
}
</script>

<style scoped lang="scss">
.np-el-dialog {
  ::v-deep {
    .el-dialog__header {
      display: none;
    }

    .el-dialog {
      width: 100%;
      height: 100%;
      margin: 0 auto !important;
      background: transparent !important;
      box-shadow: transparent !important;
      border-radius: 0 !important;
    }

    .el-dialog__body {
      width: 100%;
      height: 100%;
      display: grid;
      // justify-content: center;
      grid-template-rows: 38fr auto 68fr;
      overflow: auto;
      padding: 60px;
    }

    .np-el-d-body {
      margin: auto;
      flex-shrink: 0;
      width: var(--width);
      min-width: var(--min-width);
      max-width: var(--max-width);
      padding: 24px;
      background-color: #fff;
      border-radius: 20px;
    }
  }
}
</style>
